<template>
  <div>
    <el-tree id="el-tree" ref="tree" class="filter-tree" :show-checkbox="true" :check-strictly="true"
      node-key="id" :expand-on-click-node="false" :default-expand-all="true" :highlight-current="true"
      :data="tree_data" @check="treeCheck" @node-contextmenu="handleNodeClick" @node-click="nodeClick" />
    <div v-if="treemenuDisplay" id="treemenu" class="tree_menu" :style="{...rightMenu}">
      <el-dropdown @command="handleTreeMenuClick">
        <el-dropdown-item icon="el-icon-edit" command="edit">{{edit_name}}</el-dropdown-item>
        <el-dropdown-item icon="el-icon-circle-plus" command="add">{{add_name}}</el-dropdown-item>
        <el-dropdown-item icon="el-icon-delete" command="del">删除</el-dropdown-item>
      </el-dropdown>
    </div>
    <!-- 新增dialog -->
    <AddForm ref="addDialog" @success="getTree" />
    <!-- 新增dialog -->
    <!-- 编辑dialog -->
    <EditForm ref="editDialog" @success="getTree" />
    <!-- 编辑dialog -->
  </div>
</template>

<script>
  import AddForm from '@/views/template/components/addForm.vue'
  import EditForm from '@/views/template/components/editForm.vue'
  import {
    getTree,
    del_,
    getColumns
  } from '@/api/template/index'

export default {
  props: {
    menu: { type: Object }, // 菜单信息
    edit_name: { type: String,default: '编辑'}, // 右键编辑按钮名称
    add_name: { type: String,default: '新增子节点'}, // 右键新增按钮名称
  },
  name: 'RayTree',
  components: {
    AddForm,
    EditForm
  },
  created() {
    this.getTree()
    this.getColumns()
  },
  data() {
    return {
      treeHeight: 0,
      tree_data: [],
      treemenuDisplay: false,
      rightSelectNode: {},
      selectNode: {},
      checkNode: {}
    }
  },
  methods: {
    getTree() {
      getTree(this.menu.data_object_no, this.menu.tree_parent_no, this.menu.parent_id_field, this.menu.tree_field)
        .then(res => {
          this.tree_data = res.tree
        })
    },
    getColumns() {
      getColumns(this.menu.data_object_no).then(res => {
        this.selectDatas = res.selectDatas
        this.rules = res.validator
        this.data_object = res.data_object
        this.columns = res.list
      })
    },
    handleNodeClick(e, data, node) {
      this.rightSelectNode = data
      this.treemenuDisplay = true
      this.rightMenu = {
        top: e.pageY + 'px',
        left: e.pageX + 'px'
      }
      var _this = this
      document.onclick = function(ev) {
        if (ev.target !== document.getElementById('treemenu')) {
          _this.treemenuDisplay = false
        }
      }
    },
    handleTreeMenuClick(command) {
      var param = {}
      if (command === 'edit') {
        const row = JSON.parse(JSON.stringify(this.rightSelectNode))
        param.id = this.menu.id
        param.columns = this.columns
        param.selectDatas = this.selectDatas
        param.rules = this.rules
        param.form = row
        param.data_object = this.data_object
        this.$refs.editDialog.show(param)
      } else if (command === 'add') {
        param.id = this.menu.id
        param.columns = this.columns
        param.selectDatas = this.selectDatas
        param.rules = this.rules
        var precondition = {}
        precondition[this.menu.tree_parent_no] = this.rightSelectNode[this.menu.parent_id_field]
        param.precondition = precondition
        param.data_object = this.data_object
        this.$refs.addDialog.show(param)
      } else if (command === 'del') {
        this.treeDelete()
      }
    },
    treeCheck: function(node, list) {
      if (!this.menu.tree_multiple) {
        this.checkNode = node
        this.$refs.tree.setCheckedKeys([node.id])
      } else {
        this.checkNode = list.checkedNodes
      }
      this.$emit('checked',this.checkNode)
    },
    nodeClick(row) {
      this.selectNode = row
      this.$emit('nodeClick',row);
    },
    // 树节点删除
    treeDelete() {
      var _this = this
      this.$confirm('确定要删除该节点吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        del_(this.rightSelectNode.id, this.menu.data_object_no).then(res => {
          this.$message({
            message: res.msg,
            type: 'success'
          })
          this.$refs.tree.remove(_this.rightSelectNode)
          this.nodeClick(_this.selectNode)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>
<style scoped>
  .tree_menu {
    position: fixed;
    display: block;
    z-index: 20000;
    background-color: #fff;
    padding: 10px 0px 10px 0px;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    line-height: 25px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
  }

  .el-tree {
    background: none;
  }
</style>
